<template>
    <div class="re-container">
        <group class="re-item" tag="div">
            <div class="re-item__bannerBox">
                <div class="re-item__banner" :style="{backgroundImage:'url('+this.headData.imgurl+')'}">
                    <div class="re-item__label" 
                            :style="{
                                backgroundColor: this.headData.label===1?'#ff7d6a':this.headData.label===2?'#acd60a':'#acd60a'
                            }"
                        >
                            <svg class="icon cell_icon" 
                                aria-hidden="true" 
                                slot="icon" 
                                :style="{
                                    width : this.headData.label===1?'.28rem':this.headData.label===2?'.32rem':'.28rem',
                                    height : this.headData.label===1?'.28rem':this.headData.label===2?'.32rem':'.28rem',
                                    marginRight : '0',
                                    verticalAlign : this.headData.label===1?'-.04rem':this.headData.label===2?'-.06rem':'-.04rem',
                                }"
                            >
                                <use :xlink:href="this.headData.label===1?'#icon-remenx':this.headData.label===2?'#icon-mianfei':'#icon-guanfangwangzhan'"></use>
                            </svg>
                            {{this.headData.label===1?'推荐':this.headData.label===2?'免费':'官方'}}
                    </div>
                </div>
            </div>
            <p class="re-item__title">{{this.headData.title}}</p>
            <p class="re-item__content">{{this.headData.content}}</p>
            <cell title="2018-06-26 14:00 至 15:30">
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem">
                    <use xlink:href="#icon-shijian-tianchong"></use>
                </svg>
                <div>
                    <span style="color: #ff721f">五天后开始</span>
                </div>
            </cell>

            <cell is-link value="地图">
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.5rem;height:.5rem;margin-left:-.06rem">
                    <use xlink:href="#icon-dizhi"></use>
                </svg>
                <span slot="title">
                    <p style="vertical-align:middle;">{{this.headData.address}}</p> 
                    <p style="vertical-align:middle;color:#ccc">{{this.headData.addressDetail}}</p> 
                </span>
            </cell>
            <cell :title="'限'+this.regiLimit+'人报名'">
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem">
                    <use xlink:href="#icon-sangeren"></use>
                </svg>
                <div>
                    <span style="color: #ff721f">已报名：{{this.hadRegiCount}}人</span>
                </div>
                
            </cell>
            <cell title="由南湖国旅承办" value="好评率:99%">
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.45rem;height:.45rem">
                    <use xlink:href="#icon-ai246"></use>
                </svg>
                
            </cell>
            <cell :title="'￥'+this.mincost+' 起'" value="赠品:参考套餐表">
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.36rem;height:.36rem;margin-left:.03rem;">
                    <use xlink:href="#icon-qian"></use>
                </svg>
            </cell>
        </group>
    </div>

</template>

<script>
import { Group , Cell } from 'vux'

export default {
    name: 'DetailHeader',
    components: {
        Cell,
        Group
    },
    props: {
        headData: Object
    },
    mounted () {
        this.headerData = this.headData
    },
    data () {
        return {
            headerData: null,
            hadRegiCount: 5
        }
    },
    computed: {
        actTime () {
            return this.common.formatDateTime(this.headData.starttime)+ ' 至 ' + this.common.formatDateTime(this.headData.endtime)
        },
        regiLimit () {
            let product = this.headData.product
            let amount = 0;
            for(let i = 0; i < product.length; i++){
                amount += product[i].productamount
            }
            return amount
        },
        regiLeft () {
            return this.regiLimit - this.hadRegiCount
        },
        mincost () {
            
            let product = this.headData.product
            return product[0].productprice
            // let minprice = 0
            // let index = 0
            // for(let i = 0;i < product.length;i++){
            //     if(product[i+1].productprice > product[i].productprice) {

            //     }
            // }
        },
        mingift () {
            let product = this.headData.product
            return product[0].paygiftmoney
        }
    }
}
</script>

<style lang="stylus" scoped>

.re-item >>> .weui-cell
    padding: .1rem 0
    &:before
        border-top: 0 
.re-item >>> .weui-cells
    font-size: 0.26rem
    margin-top: 0
    &:after
        border-bottom: 0
    &:before
        border-top: 0
.re-item >>> .vux-label
    font-size: 0.26rem

.re-item
    padding: .3rem
    background: #fff
    padding-bottom: .4rem
    margin-bottom: .2rem
    .re-item__bannerBox
        width: 100%
        border-radius: .1rem
        .re-item__label
            width: 1.2rem
            height: .4rem
            line-height: .4rem
            margin-top: .2rem  
            text-align: center
            border-radius: 0  .2rem .2rem 0  
            color: #fff
            font-size: 0.12rem
        .re-item__banner
            width:100%
            height:0
            padding-bottom: 45%
            overflow:hidden
            background-position: center center
            background-repeat: no-repeat
            -webkit-background-size:cover
            -moz-background-size:cover
            background-size:cover
            border-radius: .1rem
    .re-item__title
        line-height: .8rem
        font-size: 14px
        font-weight: 600
    .re-item__content
        line-height: .38rem
        font-size: 12px
        color: #ccc
        margin-bottom: .1rem
    .cell_icon
        margin-right: .2rem
        vertical-align: -.05rem
    
    
</style>